<script setup lang="ts">
  import { nextTick, PropType, ref } from 'vue'
  import { DataConnectTableFieldType, DataConnectTable } from '../../../hooks/types'
  import { TableInstance } from 'element-plus'
  import _ from 'lodash'

  const props = defineProps({
    // 选择时显示的字段
    showFieldList: {
      type: Array as PropType<Array<DataConnectTableFieldType>>,
      default: () => [],
    },

    // 选择方式：1-多选，2-单选
    selectMode: {
      type: Number as PropType<1 | 2>,
      default: () => 1,
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: DataConnectTable): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 数据
  const list: DataConnectTable = [
    {
      id: '1',
      snCode: '240820YW0043',
      goodCode: 'YW105010031',
      goodName: '进口深沟球轴承',
      goodSpec: '61901-2Z，12*24*6，轴承钢',
      goodClassify: '原材料-五金类-标准五金件',
      customerName: '奎恩',
      customerPhone: '15522643552',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-08-20 09:56',
      snCodeUpdateTime: '2024-12-24 11:01',
      snCodeWarrantyStartTime: '2024-12-24 11:01',
      snCodeWarrantyEndTime: '2025-12-24 11:01',
    },
    {
      id: '2',
      snCode: '240820YW0048',
      goodCode: 'YW105010031',
      goodName: '进口深沟球轴承',
      goodSpec: '61901-2Z，12*24*6，轴承钢',
      goodClassify: '原材料-五金类-标准五金件',
      customerName: '刘在均',
      customerPhone: '',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-08-20 09:56',
      snCodeUpdateTime: '2024-12-24 10:57',
      snCodeWarrantyStartTime: '2024-12-24 10:57',
      snCodeWarrantyEndTime: '2025-12-24 10:57',
    },
    {
      id: '3',
      snCode: 'FM241206Lu0bS8SY',
      goodCode: 'BMgaglnSwBdQ',
      goodName: 'HC-001',
      goodSpec: '默认规格1',
      goodClassify: '普通',
      customerName: '客户',
      customerPhone: '',
      snCodeSource: '系统创建',
      snCodeCreateTime: '2024-12-06 21:54',
      snCodeUpdateTime: '2024-12-24 10:45',
      snCodeWarrantyStartTime: '2024-12-24 10:45',
      snCodeWarrantyEndTime: '2025-01-23 10:45',
    },
    {
      id: '4',
      snCode: 'CACEBAZB0011',
      goodCode: 'ZB001B03001',
      goodName: '控制仓组件',
      goodSpec: 'SD9902LD-MAS-010',
      goodClassify: '组件-上仓控制组件',
      customerName: '江苏海筑建设工程有限公司',
      customerPhone: '',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-10-12 18:53',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-16 21:57',
      snCodeWarrantyEndTime: '2025-12-16 21:57',
    },
    {
      id: '5',
      snCode: 'ADE-0090',
      goodCode: '1.98.01.00019',
      goodName: '制冰机(ID-25)制冰机(ID-25)',
      goodSpec: '110-127V/60Hz/无/304不锈钢/无灯/无',
      goodClassify: '研发分类-成品（裸机、带包装）-历史数据',
      customerName: '浙江嗨便利网络科技有限公司',
      customerPhone: '15112321268',
      snCodeSource: '系统导入',
      snCodeCreateTime: '2024-12-17 11:11',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-21 09:11',
      snCodeWarrantyEndTime: '2025-12-21 09:11',
    },
    {
      id: '6',
      snCode: 'CACEBAZB0009',
      goodCode: 'ZB002000002',
      goodName: '升降架组件',
      goodSpec: 'SD9902LD-MAS-008',
      goodClassify: '组件-电动升降架组件',
      customerName: '065593',
      customerPhone: '15388065593',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-10-12 18:53',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-16 21:34',
      snCodeWarrantyEndTime: '2025-12-16 21:34',
    },
    {
      id: '7',
      snCode: '241010ZF000014',
      goodCode: 'ZFMB0000004',
      goodName: 'SD9902LD-MB主板PCBA',
      goodSpec: '正式板，绿油白字，V2.2',
      goodClassify: '组件-PCBA-Main Board（主板）',
      customerName: '张三',
      customerPhone: '16257498555',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-10-10 18:33',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-12 17:11',
      snCodeWarrantyEndTime: '2025-12-12 17:11',
    },
    {
      id: '8',
      snCode: 'CACEBAZB0015',
      goodCode: 'ZB001B03001',
      goodName: '控制仓组件',
      goodSpec: 'SD9902LD-MAS-010',
      goodClassify: '组件-上仓控制组件',
      customerName: '张三',
      customerPhone: '16257498444',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-10-12 18:53',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-16 22:04',
      snCodeWarrantyEndTime: '2025-12-16 22:04',
    },
    {
      id: '9',
      snCode: 'ADE-0093',
      goodCode: '1.98.01.00019',
      goodName: '制冰机(ID-25)制冰机(ID-25) ',
      goodSpec: '110-127V/60Hz/无/304不锈钢/无灯/无',
      goodClassify: '研发分类-成品（裸机、带包装）-历史数据',
      customerName: '浙江嗨便利网络科技有限公司',
      customerPhone: '17763630852',
      snCodeSource: '系统导入',
      snCodeCreateTime: '2024-12-17 11:11',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-21 09:11',
      snCodeWarrantyEndTime: '2025-12-21 09:11',
    },
    {
      id: '10',
      snCode: 'CACEBAZB0014',
      goodCode: 'ZB001B03001',
      goodName: '控制仓组件',
      goodSpec: 'SD9902LD-MAS-010',
      goodClassify: '组件-上仓控制组件',
      customerName: '张三',
      customerPhone: '16257498444',
      snCodeSource: '金蝶云星空',
      snCodeCreateTime: '2024-10-12 18:53',
      snCodeUpdateTime: '2024-12-24 00:00',
      snCodeWarrantyStartTime: '2024-12-16 22:04',
      snCodeWarrantyEndTime: '2025-12-16 22:04',
    },
  ]

  // 选择列表
  const selectList = ref<DataConnectTable>([])

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  /**
   * 当选择项发生变化时会触发该事件
   * @param {DataConnectTable} _list - 选择的列表
   */
  const handleSelectionChange = (_list: DataConnectTable) => {
    selectList.value = _.cloneDeep(_list)
  }

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    visible.value = false
  }

  /**
   * 确定事件
   */
  const onConfirm = () => {
    hideDialog()
    emits('update', _.cloneDeep(selectList.value))
    selectList.value.length = 0
  }

  /**
   * 单选选择事件
   * @param {number} val - 行索引
   */
  const handleRadioChange = (val: number) => {
    if (tableInstance.value) {
      selectList.value = [list[val]]
    }
  }

  defineExpose({
    setSelectedRow: (selectRowIds: Array<string>) => {
      nextTick(() => {
        if (tableInstance.value) {
          tableInstance.value.clearSelection()

          list.forEach((data) => {
            selectRowIds.forEach((selectRowId) => {
              if (selectRowId === data.id) {
                tableInstance.value.toggleRowSelection(data, true)
              }
            })
          })
        }
      })
    },
  })
</script>

<template>
  <h-dialog v-model="visible" title="选择条码" :width="800" @close="hideDialog">
    <el-table
      ref="tableInstance"
      :border="true"
      :data="list"
      max-height="450"
      :stripe="true"
      @selection-change="handleSelectionChange"
    >
      <!--选择（多选）-->
      <el-table-column
        v-if="props.selectMode === 1"
        width="50"
        type="selection"
        :align="'center'"
        fixed="left"
      />

      <!-- 选择（单选） -->
      <el-table-column v-if="props.selectMode === 2" width="50" :align="'center'" fixed="left">
        <template #default="{ row, $index }">
          <el-radio-group :model-value="selectList[0] ? selectList[0].id : ''">
            <el-radio :value="row.id" @change="handleRadioChange($index)"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>

      <!-- 序号 -->
      <el-table-column type="index" width="50" :align="'center'" fixed="left" label="序号" />

      <!-- 条码 -->
      <el-table-column
        v-if="props.showFieldList.includes('snCode')"
        show-overflow-tooltip
        label="条码"
        prop="snCode"
        width="140"
      />

      <!-- 产品编号 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodCode')"
        show-overflow-tooltip
        label="产品编号"
        prop="goodCode"
        width="140"
      />

      <!-- 产品名称 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodName')"
        show-overflow-tooltip
        label="产品名称"
        prop="goodName"
        width="140"
      />

      <!-- 产品规格 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodSpec')"
        show-overflow-tooltip
        label="产品规格"
        prop="goodSpec"
        width="140"
      />

      <!-- 产品分类 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodClassify')"
        show-overflow-tooltip
        label="产品分类"
        prop="goodClassify"
        width="140"
      />

      <!-- 公司名称 -->
      <el-table-column
        v-if="props.showFieldList.includes('customerName')"
        show-overflow-tooltip
        label="公司名称"
        prop="customerName"
        width="140"
      />

      <!-- 公司手机号 -->
      <el-table-column
        v-if="props.showFieldList.includes('customerPhone')"
        show-overflow-tooltip
        label="公司手机号"
        prop="customerPhone"
        width="140"
      />

      <!-- 条码来源 -->
      <el-table-column
        v-if="props.showFieldList.includes('snCodeSource')"
        show-overflow-tooltip
        label="条码来源"
        prop="snCodeSource"
        width="140"
      />

      <!-- 条码创建时间 -->
      <el-table-column
        v-if="props.showFieldList.includes('snCodeCreateTime')"
        show-overflow-tooltip
        label="条码创建时间"
        prop="snCodeCreateTime"
        width="140"
      />

      <!-- 条码更新时间 -->
      <el-table-column
        v-if="props.showFieldList.includes('snCodeUpdateTime')"
        show-overflow-tooltip
        label="条码更新时间"
        prop="snCodeUpdateTime"
        width="140"
      />

      <!-- 质保开始 -->
      <el-table-column
        v-if="props.showFieldList.includes('snCodeWarrantyStartTime')"
        show-overflow-tooltip
        label="质保开始"
        prop="snCodeWarrantyStartTime"
        width="140"
      />

      <!-- 质保结束 -->
      <el-table-column
        v-if="props.showFieldList.includes('snCodeWarrantyEndTime')"
        show-overflow-tooltip
        label="质保结束"
        prop="snCodeWarrantyEndTime"
        width="140"
      />
    </el-table>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss"></style>
